<template>
	<div class="wrap">
		<div class="page-title">
			<h3>网络配置</h3>
		</div>
		<div class="table-wrap">
			<table>
				<thead class="thead-bottom-line">
					<tr>
						<th style="width: 600px;" >虚假响应配置</th>
                        <th style="width: 600px;">
                            <ul class="butn">
                                <li v-on:click='reset()'>
                                    <img :src="`/static/${themeColor}-img/bule_delet.png`" />
                                    <span>重置</span>
                                </li>
                                <li v-on:click='setVhost()'>          
                                    <img width="13px" :src="`/static/${themeColor}-img/bule_save.png`" />
                                    <span>保存</span>
                                </li>
                            </ul>
                        </th>
					</tr>
				</thead>
				<tbody>
					<tr>
                        <td style="width: 600px;">
                            Linux主机比例：
                            <input 
                                type="number"  
                                class="linuxpp"  
                                @blur="chkLinuxpp()" 
                                v-model="linuxpp" 
                                max="100" 
                                min="0" 
                                step="1" 
                                @focus="ppEmpty()">(%)
                            <span class="mi">* 必填</span>    
                        </td>
                        <td style="width: 600px;">
                            <label>端口：</label>
                            <textarea class="long-input linuxport" type="text" data-toggle="popover" data-placement="top"
                            @blur="chkLinuxport" v-model="linuxport" @focus="isEmpty('.linuxport')"></textarea>
                            <span class="mi-textarea">* 必填</span>
                        </td>
					</tr>
                    <tr>
                        <td style="width: 600px;">
                            Windows主机比例：<input type="number"  class="windowspp"
                            @blur="chkWindowspp()" v-model="windowspp" max="100" min="0" step="1" @focus="ppEmpty()">(%)
                            <span class="mi">* 必填</span>
                        </td>
                        <td style="width: 600px;">
                            <label>端口：</label>
                            <textarea class="long-input windowsport" type="text" data-toggle="popover" data-placement="top"
                            @blur="chkWindowsport" v-model="windowsport" @focus="isEmpty('.windowsport')"></textarea>
                            <span class="mi-textarea">* 必填</span>
                        </td>
					</tr>
                    <tr>
                        <td style="width: 600px;">
                            Server主机比例：<input type="number" class="serverpp"
                            @blur="chkServerpp()" v-model="serverpp" step="1" @focus="ppEmpty()">(%)
                            <span class="mi">* 必填</span>
                        </td>
                        <td style="width: 600px;">
                            <label>端口：</label>
                            <textarea rows="2" class="long-input serverport" type="text" data-toggle="popover" data-placement="top"
                            @blur="chkServerport" v-model="serverport" 
                            @focus="isEmpty('.serverport')"></textarea>
                            <span class="mi-textarea">* 必填</span>
                        </td>
					</tr>
                    <tr>
                        <td style="width: 600px;">
                            端口响应概率：<input type="number" class="portrespp" data-toggle="popover" data-placement="top"
                            @blur="chkPortpp()" v-model="portrespp" max="100" min="0" step="1" @focus="noEmpty('.portrespp')">(%)
                            <span class="mi">* 必填</span>                            
                        </td>
                        <td style="width: 600px;"></td>
					</tr>
                    <tr>
                        <td style="padding-left: 235px;" colspan="2" >
                            <label>响应mac标识：</label>
                            <textarea class="long-input portmacmark" data-toggle="popover" data-placement="top"
                            @blur="chkMac" type="text" v-model="portmacmark" @focus="noEmpty('.portmacmark')"
                            @keyup.enter="setVhost()"></textarea>
                            <span class="mi-textarea">* 必填</span>
                        </td>
					</tr>
				</tbody>
			</table>
            <p style="color:#69b6ff ;">注：多个端口或响应mac标识用“，”隔开。三个主机比例必须是整数，相加不能大于100。</p>
		</div>
        <noticeModal :id="'notice'" :title="'提示'" :status ="status"></noticeModal>
	</div>
</template>
<script>
    import NetService from 'services/netService'
    import formatTest from 'libs/formatTest'
    import noticeModal from 'components/common/noticeModal'

	export default {
        
        components: {
            noticeModal
        },

        mounted() {
           this.getVhost();
        },
        
        data() {
            return {
                linuxpp: "",
                linuxport: "",
                windowspp: "",
                windowsport: "",
                serverpp: "",
                serverport: "",
                portrespp: "",
                portmacmark: "",
                error: "",
                oper: "",
                status: ''
            }
        },

        methods: {
            setVhost() {
                if (this.checkPer() && this.checkPort() && this.checkEachport()) {
                    let params = {
                        17: `${this.linuxpp}|${this.windowspp}|${this.serverpp}`,
                        18: this.portrespp,
                        19: this.linuxport,
                        20: this.windowsport,
                        21: this.serverport,
                        22: this.portmacmark
                    }
                    this.status = "ing"
                    NetService.updateVResRange(params)
                        .then((res) => {
                            if (res.errcode === 0) {
                                this.status = "ok"
                                $('#notice').modal('show')
                                setTimeout(function() {
                                    $('#notice').modal('hide')
                                },800)
                                this.getVhost()
                            } else {
                                this.status = "error"
                                $('#notice').modal('show')
                                setTimeout(function() {
                                    $('#notice').modal('hide')
                                },800)
                            }
                        })
                }
            },
            checkPer() {
                let regNum = /0$|(^[1-9].\d*$)/

                if (!regNum.test(this.linuxpp)) {
                    this.shock(".linuxpp")
                    this.popoverShow('.linuxpp', 'Linux主机比例输入有误')
                    return false
                } else {
                    this.noshock(".linuxpp")
                } 
                if (!regNum.test(this.windowspp)) {
                    this.shock(".windowspp")
                    this.popoverShow('.windowspp', 'Windows主机比例输入有误')
                    return false
                } else {
                    this.noshock(".windowspp")
                }  
                if (!regNum.test(this.serverpp)) {
                    this.shock(".serverpp")
                    this.popoverShow('.serverpp', 'Server主机比例输入有误')
                    return false
                } else {
                    this.noshock(".serverpp")
                }  
                if ((parseFloat(this.linuxpp) + parseFloat(this.windowspp) + parseFloat(this.serverpp)) > 100) {
                    this.shock(".linuxpp")
                    this.shock(".windowspp")
                    this.shock(".serverpp")
                    this.popoverShow('.serverpp', 'Linux主机、Windows主机与Server主机比例大于100')
                    return false
                } else {
                    this.noshock(".linuxpp")
                    this.noshock(".windowspp")
                    this.noshock(".serverpp")
                }
                if (!regNum.test(this.portrespp)) {
                    this.shock(".portrespp")
                    this.popoverShow('.portrespp', '端口响应比例输入有误')
                    return false
                } else {
                    this.noshock(".portrespp")
                }  
                if (this.portrespp > 100) {
                    this.shock(".portrespp")
                    this.popoverShow('.portrespp', '端口响应概率大于100')
                    return false
                } else {
                    this.noshock(".portrespp")
                } 
                return true
            },
            checkPort() {
                let regMarkinput = /^[0-9a-zA-Z,]+$/
                let regPortinput = /^[0-9,]+$/

                this.portmacmark = this.portmacmark.replace(/，/g,",")
                this.linuxport = this.linuxport.replace(/，/g,",")
                this.windowsport = this.windowsport.replace(/，/g,",")
                this.serverport = this.serverport.replace(/，/g,",")
            
                if (!regMarkinput.test(this.portmacmark)) {
                    this.shock(".portmacmark")
                    return false
                } else {
                    this.noshock(".portmacmark")
                }  
                if (!regPortinput.test(this.linuxport)) {
                    this.shock(".linuxport")
                    return false
                } else {
                    this.noshock(".linuxport")
                }  
                if (!regPortinput.test(this.windowsport)) {
                    this.shock(".windowsport")
                    return false
                } else {
                    this.noshock(".windowsport")
                }  
                if (!regPortinput.test(this.serverport)) {
                    this.shock(".serverport")
                    return false
                } else {
                    this.noshock(".serverport")
                } 
                return true
            },
            checkEachport() {
                let regPort = /^((([1-9]\d{0,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d)|(6553[0-5])),){0,19}(([1-9]\d{0,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d)|(6553[0-5]))$/;
                let regMac = /^(([0-9A-Fa-f]{6}),){0,9}([0-9A-Fa-f]{6})$/;

                let mac = this.portmacmark.replace(/[，]/g,",").replace(/\s+/, '').split(",")
                let linux = this.linuxport.replace(/[，]/g,",").replace(/\s+/, '').split(",")
                let windows = this.windowsport.replace(/[，]/g,",").replace(/\s+/, '').split(",")
                let server = this.serverport.replace(/[，]/g,",").replace(/\s+/, '').split(",")

                if (linux.length > 20) {
                    this.shock(".linuxport")
                    this.popoverShow('.linuxport', '端口最多20个')
                    return false
                } else {
                    this.noshock(".linuxport")
                }
                for(let i = 0; i < linux.length; i++) {
                    if (!regPort.test(linux[i])) {
                        this.shock(".linuxport")
                        this.popoverShow('.linuxport', "第" + (i+1) +"个端口格式有误")
                        return false
                    } else {
                        this.noshock(".linuxport")
                    }
                }
                
                if (windows.length > 20) {
                    this.shock(".windowsport")
                    this.popoverShow('.windowsport', '端口最多20个')
                    return false
                } else {
                    this.noshock(".windowsport")
                }
                for(let i = 0; i < windows.length; i++) {
                    if (!regPort.test(windows[i])) {
                        this.shock(".windowsport")
                        this.popoverShow('.windowsport', "第" + (i+1) +"个端口格式有误")
                        return false
                    } else {
                        this.noshock(".windowsport")
                    }
                }
                
                if (server.length > 20) {
                    this.shock(".serverport")
                    this.popoverShow('.serverport', '端口最多20个')
                    return false
                } else {
                    this.noshock(".serverport")
                }
                for(let i = 0; i < server.length; i++) {
                    if (!regPort.test(server[i])) {
                        this.shock(".serverport")
                        this.popoverShow('.serverport', "第" + (i+1) +"个端口格式有误")
                        return false
                    } else {
                        this.noshock(".serverport")
                    }
                }

                if (mac.length > 20) {
                    this.shock(".portmacmark")
                    this.popoverShow('.serverport', '响应mac标识最多20个')
                    return false
                } else {
                    this.noshock(".portmacmark")
                } 
                for(let i = 0; i < mac.length; i++) {
                    if (!regMac.test(mac[i])) {
                        this.shock(".portmacmark")
                        this.popoverShow('.portmacmark', "第" + (i+1) +"个端口格式有误")
                        return false
                    } else {
                        this.noshock(".portmacmark")
                    }
                }
                return true
            },
            getVhost() {
                let params ={
                    oper:'load'
                }
				NetService.getVResRange(params)
				    .then((res) => {
                        if (res.errcode === 0) {
                            let hostRatio = res['17'].split('|')
                            this.linuxpp = hostRatio[0]
                            this.windowspp = hostRatio[1]
                            this.serverpp = hostRatio[2]
                            this.portrespp = res['18']
                            this.linuxport = res['19']
                            this.windowsport = res['20']
                            this.serverport = res['21']
                            this.portmacmark = res['22']
                        }
                        
                    })
       		},
            chkLinuxpp() {
                let regNum = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
                if ( !regNum.test(this.linuxpp)) {
                    this.shock(".linuxpp")
                    return false
                } else {
                    this.noshock(".linuxpp")
                } 
            },
            chkWindowspp() {
                let regNum = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
                if ( !regNum.test(this.windowspp)) {
                    this.shock(".windowspp")
                    return false
                } else {
                    this.noshock(".windowspp")
                }  
            },
            chkServerpp() {
                let regNum = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
                if ( !regNum.test(this.serverpp)) {
                    this.shock(".serverpp")
                    return false
                } else {
                    this.noshock(".serverpp")
                    if ((parseFloat(this.linuxpp) + parseFloat(this.windowspp) + parseFloat(this.serverpp)) > 100) {
                        this.shock(".linuxpp")
                        this.shock(".windowspp")
                        this.shock(".serverpp")
                        this.popoverShow('.serverpp', 'Linux主机、Windows主机与Server主机比例大于100')
                        return false
                    } else {
                        this.noshock(".linuxpp")
                        this.noshock(".windowspp")
                        this.noshock(".serverpp")
                    }
                }    
                
            },
            chkPortpp() {
                let regNum = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
                if ( !regNum.test(this.portrespp)) {
                    this.shock(".portrespp")
                    this.popoverShow('.portrespp', '端口响应比例输入有误')
                    return false
                } else {
                    this.noshock(".portrespp")
                }  
                if ( this.portrespp > 100) {
                    this.shock(".portrespp")
                    this.popoverShow('.portrespp', '端口响应概率大于100')
                    return false
                } else {
                    this.noshock(".portrespp")
                } 
            },
            chkLinuxport() {
                this.linuxport = this.linuxport.replace(/[，]/g,",").replace(/\s+/g, '')
                let regPortinput = /^[0-9,]+$/;
                let regPort = /^((([1-9]\d{0,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d)|(6553[0-5])),){0,19}(([1-9]\d{0,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d)|(6553[0-5]))$/;
                if ( !regPortinput.test(this.linuxport)) {
                    this.shock(".linuxport")
                    return false
                } else {
                    this.noshock(".linuxport")
                    let linux = this.linuxport.split(",")
                    if ( linux.length > 20) {
                        this.shock(".linuxport")
                        this.popoverShow('.linuxport', '端口最多20个')
                        return false
                    } else {
                        this.noshock(".linuxport")
                    }
                    for( let i=0; i < linux.length; i++) {
                        if ( !regPort.test(linux[i])) {
                            this.shock(".linuxport")
                            this.popoverShow('.linuxport', "第" + (i+1) +"个端口格式有误")
                            return false
                        } else {
                            this.noshock(".linuxport")
                        }
                    }
                }  
            },
            chkWindowsport() {
                this.windowsport = this.windowsport.replace(/，/g,",").replace(/\s+/g, '')
                let regPortinput = /^[0-9,]+$/;
                let regPort = /^((([1-9]\d{0,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d)|(6553[0-5])),){0,19}(([1-9]\d{0,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d)|(6553[0-5]))$/;
                if ( !regPortinput.test(this.windowsport)) {
                    this.shock(".windowsport")
                    return false
                } else {
                    this.noshock(".windowsport")
                    let windows = this.windowsport.split(",")
                    if ( windows.length > 20) {
                        this.shock(".windowsport")
                        this.popoverShow('.windowsport', '端口最多20个')
                        return false
                    } else {
                        this.noshock(".windowsport")
                    }
                    for( let i=0; i < windows.length; i++) {
                        if ( !regPort.test(windows[i])) {
                            this.shock(".windowsport")
                            this.popoverShow('.windowsport', "第" + (i+1) +"个端口格式有误")
                            return false
                        } else {
                            this.noshock(".windowsport")
                        }
                    }
                }  
            },
            chkServerport() {
                this.serverport = this.serverport.replace(/，/g,",").replace(/\s+/g, '')
                let regPortinput = /^[0-9,]+$/;
                let regPort = /^((([1-9]\d{0,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d)|(6553[0-5])),){0,19}(([1-9]\d{0,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d)|(6553[0-5]))$/;
                if ( !regPortinput.test(this.serverport)) {
                    this.shock(".serverport")
                    return false
                } else {
                    this.noshock(".serverport")
                    let server = this.serverport.split(",")
                    if ( server.length > 20) {
                        this.shock(".serverport")
                        this.popoverShow('.serverport', '端口最多20个')
                        return false
                    } else {
                        this.noshock(".serverport")
                    }
                    for( let i=0; i < server.length; i++) {
                        if ( !regPort.test(server[i])) {
                            this.shock(".serverport")
                            this.popoverShow('.serverport', "第" + (i+1) +"个端口格式有误")
                            return false
                        } else {
                            this.noshock(".serverport")
                        }
                    }
                } 
            },
            chkMac() {
                this.portmacmark = this.portmacmark.replace(/，/g,",").replace(/\s+/g, '')
                let regMarkinput = /^[0-9a-zA-Z,]+$/;
                let regMac = /^(([0-9A-Fa-f]{6}),){0,9}([0-9A-Fa-f]{6})$/;
                if ( !regMarkinput.test(this.portmacmark)) {
                    this.shock(".portmacmark")
                    return false
                } else {
                    this.noshock(".portmacmark")
                    let mac = this.portmacmark.split(",")
                    if ( mac.length > 20) {
                        this.shock(".portmacmark")
                        this.popoverShow('.serverport', '响应mac标识最多20个')
                        return false
                    } else {
                        this.noshock(".portmacmark")
                    } 
                    for( let i=0; i < mac.length; i++) {
                        if ( !regMac.test(mac[i])) {
                            this.shock(".portmacmark")
                            this.popoverShow('.portmacmark', "第" + (i+1) +"个端口格式有误")
                            return false
                        } else {
                            this.noshock(".portmacmark")
                        }
                    }
                }  
            },
            reset() {
                this.linuxpp="",
                this.linuxport="",
                this.windowspp="",
                this.windowsport="",
                this.serverpp="",
                this.serverport="",
                this.portrespp="",
                this.portmacmark=""
            },
            testVal(ele, reg) {
				let val = $(ele).val()
				let test = new formatTest(ele, reg, false)
				return test.testFormat()
			},
            isEmpty(ele) {
                let test = new formatTest(ele)
			    test.isEmpty()
			},
            noEmpty(ele) {
                let test = new formatTest(ele)
			    test.notEmpty()
			},
            ppEmpty() {
                $(".windowspp").parent().find('.mi').css('color', '#d2d2d2')
		        $(".windowspp").css('border', '1px solid #e8e8e8')
                $(".linuxpp").parent().find('.mi').css('color', '#d2d2d2')
		        $(".linuxpp").css('border', '1px solid #e8e8e8')
                $(".serverpp").parent().find('.mi').css('color', '#d2d2d2')
		        $(".serverpp").css('border', '1px solid #e8e8e8')
            },
            shock(ele) {
                let $ele = $(ele)
                if ($ele.val()=='') {
                    let mi = $ele.parent().find('.mi')
                    let miTextarea = $ele.parent().find('.mi-textarea')
                    mi.length && mi.css('color', '#b63039')
                    miTextarea.length && miTextarea.css('color', '#b63039')
                }
				$ele.css('border', '1px solid #b63039')
				$ele.addClass('animated shake')
				setTimeout(function() {
					$ele.removeClass('animated shake')
				}, 200)
            },
            noshock(ele) {
                $(ele).css('border', '1px solid #e8e8e8')
            },
            popoverShow(ele, content) {
                let $ele = $(ele)
				$ele.attr("data-content", content).popover('show')
				setTimeout(function() {
					$ele.popover('destroy')
				}, 1000)
			}
        }
	}
    
</script>
<style scoped lang="less">
	.wrap {
		margin: 30px 0 0 30px;
		padding-bottom: 10px;
		background: #FFFFFF;
	}
	h3 {
		line-height: 30px;
	}
    .butn {
		display: inline-block;
		float: right;
	}
	.butn li{
		display: inline-block;
		margin: 0px 25px 0px 0px;
		cursor: pointer;		
    }
	.butn img {
		margin: 0 5px;
        width: 12px;
	}
	.table-wrap{
		margin: 20px;
	}
    tbody tr {
		height: 60px;
	}
	thead tr th {
        height: 30px;
        text-align: left;
        padding-left: 15px;
        position: relative;
	}
    .colortable tr:hover{
        background: none;
    }
    tbody tr td {
        position: relative;
        label {
            position: relative;
            top: -17px;
            color: #495060;
            font-weight: normal
        }
        textarea {
            position: relative;
            top: 5px;
            resize: none;
            padding-left: 5px;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
            outline: none;
        }
    }
    tbody tr td:nth-child(1) {
        text-align: right;
        padding-right: 45px;
    }
    tbody tr td:last-child{
        text-align: left;
        padding-left: 55px;
    }
    tbody tr:last-child td:nth-child(1) {
        padding-right: 63px;
    }
    tbody tr:nth-child(4) td {
        padding-top: 15px;
    }
    input{
        height: 25px;
        width: 130px;
        border: 1px solid #e6e6e6;
        border-radius: 5px;
        margin-right: 8px;
        padding: 3px;
    }
    .long-input{
        width: 300px;
        background: #ffffff;
    }
    p {
		color: #fb5656;
		margin-top: 20px;
    }
    .mi {
        color: #d2d2d2;
		margin-left: 10px;
    }
    .mi-textarea {
        position: relative;
        top: -17px;
		margin-left: 10px;
        color: #d2d2d2;
	}
</style>